<template>
	<cl-page>
		<view class="page">
			<view class="form">

				<cl-form ref="Form" v-model="form" label-position="left" :rules="rules" :tips="tips"
					:disabled="loading">
					<cl-form-item label="开关状态" justify="end" prop="playMode">
						<cl-switch v-model="form.settingSwitch"></cl-switch>
					</cl-form-item>
					<cl-form-item label="播放方式" justify="start" prop="playMode" >
						<cl-radio-group v-model="form.playMode" :disabled="form.settingSwitch==0">
							<cl-radio v-for="(item, index) in options" :key="index" :label="item.value">
								{{ item.label }}
							</cl-radio>
						</cl-radio-group>
					</cl-form-item>
					<cl-form-item label="背景音量" prop="volume" >
						<cl-slider active-color="#2b2e3d" :disabled="form.settingSwitch==0||loading" v-model="form.volume" show-value :min="0.6" :step="0.1"
							:max="2"></cl-slider>
					</cl-form-item>
					<cl-form-item label="背景音频" v-if="form.playMode==0" prop="audioId">
						<cl-select-popup require :disabled="form.settingSwitch==0||loading" v-model="form.audioId" title="选择背景音频" :options="list">
							<template #append>
								<cl-button round fill size="default" style="margin-left:20rpx" @click="trialListening(form.audioId,list)">
									试听
								</cl-button>
							</template>
						</cl-select-popup>
					</cl-form-item>
				</cl-form>
			</view>

			<cl-footer>
				<cl-button custom type="primary" :loading="loading" @tap="save"> 保存 </cl-button>
			</cl-footer>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
	import { reactive, ref, onBeforeUnmount } from "vue";
	import { service, useCool, useStore } from "/@/cool";
	import { useUi } from "/$/cool-ui";
	import { onReady,onHide } from "@dcloudio/uni-app";
	import { trialListening, stopListening } from "/@/cool/utils";
	const { router } = useCool();
	const ui = useUi();
	const tips = ref<string>("toast");
	const Form = ref<ClForm.Ref>();
	const loading = ref(false);

	const form = reactive({
		playMode: 0,
		volume: 2,
		audioId: null,
		settingSwitch:true
	});
	const list = ref([] as any)
	const rules = reactive<any>({
		audioId: {
			required: true,
			message: "背景音频不能为空"
		}
	})
	const options = ref([
		{
			label: "固定播放",
			value: 0
		}, {
			label: "随机播放",
			value: 1
		}
	])
	async function getAudioList() {
		service.broadcast.audio.list().then(res => {
			res.map(item => {
				item.label = item.name
				item.value = item.id
			})
			list.value = res
		})
	}

	async function save() {
		let temp=JSON.parse(JSON.stringify(form))
		Form.value?.validate(async (valid) => {
			if (valid) {
				loading.value = true;
				temp.settingSwitch=form.settingSwitch?1:0
				await service.user.setting.add(temp).then(res => {
					loading.value = false;
					ui.showTips("信息保存成功", () => {
						uni.switchTab({
							url:"/pages/index/index"
						})
					});
				}).catch(err => {
					loading.value = false;
					ui.showToast(err.message);
				})
			}
		});

	}
	async function getDetail() {
		await service.user.setting.settingUserInfo().then(res => {
			if (res) {
				form.playMode = res.playMode
				form.volume = res.volume
				form.audioId = res.audioId
				form.settingSwitch=res.settingSwitch==0?false:true
			}
			console.log(form)
		})
	}
	onHide(() => {
		// stopListening()
	})
	onReady(() => {
		getDetail()
		getAudioList()
	});
</script>

<style lang="scss" scoped>
	.page {
		.form {
			padding: 20rpx 24rpx;
		}
	}
</style>